<template>
  <div class="login">
    <div class="container">
      <div class="login_box">
        <group gutter="12px">
          <x-input title="账号" placeholder="请输入账号" v-model="loginForm.username">
            <img slot="label" style="margin-right:10px;display:block;" src="../../assets/images/account_icon.png" width="16" height="16">
          </x-input>
        </group>
        <group gutter="10px">
          <x-input title="密码" placeholder="请输入密码" type="password" v-model="loginForm.password">
            <img slot="label" style="margin-right:10px;display:block;" src="../../assets/images/psd_icon.png" width="16" height="16">
          </x-input>
        </group>
        <div class="remember">
          <span class="remember_span" :class="{'active':remember}" @click="togglePay">记住密码</span>
        </div>
        <!-- <check-icon :value.sync="remember" type="plain"> 记住密码</check-icon> -->
        <x-button type="primary" class="login_btn" @click.native="toPath">登 录</x-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { XInput, XButton, Group, CheckIcon } from 'vux'
  export default {
    name: 'login',
    components: {
      XInput, XButton, Group, CheckIcon
    },
    data() {
      return {
        remember: false,
        loginForm: {
          username: '',
          password: ''
        }
      }
    },
    created() {
    },
    methods: {
      togglePay: function () {
        this.remember = !this.remember
      },
      toPath: function () {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$router.push('/studentIndex')
        }).catch(() => {

        })

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login {
    width: 375px;
    height: 100%;
    background: url("../../assets/images/login_bg.jpg") center center no-repeat;
    background-size: 100% 100%;
    position: relative;
  }

  .container {
    position: absolute;
    height: 250px;
    width: 100%;
    bottom: 88px;
    left: 0;
  }

  .login_box {
    width: 300px;
    height: 250px;
    background: #fff;
    margin: 0 auto;
    border-radius: 14px;
    padding: 5px 28px 0;
    box-sizing: border-box;
  }

  .login_btn {
    margin-top: 42px;
  }

  .remember {
    text-align: left;
    padding-top: 13px;
  }

  .remember_span {
    background-position: left center;
    background-repeat: no-repeat;
    display: inline-block;
    background-image: url('../../assets/images/remember_icon1.png');
    background-size: 14px 14px;
    font-size: 12px;
    padding-left: 18px;
    color: #999;
    line-height: 14px;
  }

    .remember_span.active {
      background-image: url('../../assets/images/remember_icon2.png');
    }
</style>
<style lang="less">
  .login {
    .weui-cell

  {
    padding-left: 4px;
  }

  .weui-cells:before {
    border-top: none;
  }

  .weui-btn_primary {
    background-color: #2269ff;
  }

    .weui-btn_primary:not(.weui-btn_disabled):active {
      background-color: #155cf2;
    }
  }
</style>
